<template>
  <div class="pro-query">
    <a-form :model="formState" v-bind="$attrs" label-align="right" :label-col="{span: colSpan.label }" :wrapper-col="{span: colSpan.wrapper}">
      <div style="display: flex;width: 100%;">
        <a-row class="pro-query-row" style="width: 100%;">
          <a-col :span="8" :key="index" v-for="(param, index) in searchParam"
                 v-show="!param.hidden || !hidden">
            <a-form-item :label="param.label" class="mb-0 mt-15 w100">
              <!-- 输入框 -->
              <a-input v-model:value="formState[param.key]"
                       v-show="!param.hidden || !hidden"
                       v-if="param.type === 'input'"
                       :placeholder="param.placeholder"
                       type="text"
              >
              </a-input>

              <!-- 范围时间 -->
              <a-range-picker v-model:value="formState[param.key]"
                              v-show="!param.hidden || !hidden"
                              v-if="param.type === 'rangeTime'"
                              :show-time="param.showTime?param.showTime:false"
                              :format="param.format?param.format:'YYYY-MM-DD'"
                              :valueFormat="param.valueFormat?param.valueFormat:'YYYY-MM-DD'"
                              :placeholder="param.placeholder?param.placeholder:['开始日期', '结束日期']"
                              @change="onChange"
                              style="width:100%">
              </a-range-picker>

              <!-- 选择框 -->
              <a-select v-if="param.type === 'select'"
                        :placeholder="param.placeholder"
                        v-model:value="formState[param.key]"
                        class="pro-query-select"
              >
                <a-select-option :key="index" v-for="(option,index) in param.options" :value="option.value">
                  {{ option.text }}
                </a-select-option>
              </a-select>
              <!-- 多选 -->
              <a-select v-if="param.type === 'selectMore'"
                        :mode="param.mode"
                        :placeholder="param.placeholder"
                        v-model="formState[param.key]"
                        class="pro-query-select"
              >
                <a-select-option :key="index" v-for="(option,index) in param.options" :value="option.value">
                  {{ option.text }}
                </a-select-option>
              </a-select>
              <!-- 树的选择 -->
              <a-tree-select
                v-if="param.type === 'selectTree'"
                v-model:value="formState[param.key]"
                :dropdown-style="{ maxHeight: '260px', overflow: 'auto' }"
                :tree-data="param.treeData"
                :placeholder="param.placeholder"
                replace
                tree-default-expand-all
                :replaceFields="param.replaceFields"
                class="pro-query-select"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="mt-15" :span="4">
            <!-- 按钮组 -->
            <a-form-item class="w-100p display-block mb-0">
              <div class="box-ver-center">
                <a-button type="primary" class="pro-query-button" @click="search">查询</a-button>
                <a-button html-type="submit" class="pro-query-button" @click="reset">重置</a-button>
                <!-- 收起 隐藏 -->
                <a-button type="text" @click="hiddenHandle" v-show="hidden && more">
                  高级筛选
                </a-button>
                <a-button type="text" @click="hiddenHandle" v-show="!hidden && more">
                  高级筛选
                </a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </a-form>
  </div>
</template>
<script>
import "./index.less";
import { defineComponent, reactive, ref, watch } from "vue";
// import { DownOutlined , UpOutlined } from "@ant-design/icons-vue"
import { useForm } from "@ant-design-vue/use";

export default defineComponent({
  name: "pro-query",
  props: {
    searchParam: {
      type: Array,
    },
    colSpan: {
      type: Object,
      default: () => {
        return {
           label: 5,
           wrapper: 16,
        }
      }
    }
  },
  components: {
    // DownOutlined,
    // UpOutlined
  },
  emits: [
    'on-search',
    'on-reset'
  ],
  setup(props, {emit}) {

    const hidden = ref(true);
    const more = ref(false);

    const formState = reactive({})
    const formRules = reactive({})

    const searchParam = ref([])

    const generateFormState = array => {
      array.length > 0 && array.forEach(it => {
        const {key, rules = [], value} = it
        formState[key] = value == undefined ? null : value
        formRules[key] = rules
      })
    }
    const {validate, resetFields} = useForm(formState, formRules)

    /// 更多操作
    const hiddenHandle = function() {
      hidden.value = !hidden.value;
    }

    /// 表单查询
    const search = async function(){
      var o = await validate();
      console.log(o)
      emit('on-search',o)
    }

    /// 重置表单
    const reset = function(){
      resetFields();
      Object.keys(formState).forEach(v => {
        formState[v] = null
      })
      emit('on-reset')
    }

    watch(
      () => props.searchParam,
      (val) => {
        searchParam.value = [...val]
        generateFormState(val)
        /// 是否存在隐藏表单
        searchParam.value.forEach(element => {
          if(element.hidden){
            return more.value = true;
          }
        });
      },
      {
        deep: true,
        immediate: true
      }
    )

    return {
      more: more,
      hidden: hidden,
      hiddenHandle: hiddenHandle,

      /// EMIT
      search: search,
      reset: reset,

      /// 状态
      formState,
      formRules
    }
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    },
  }
});
</script>
